<template>
  <base-content>
    <template>
      <el-main>
        <el-form ref="form" class="fp-form" :inline="true" label-width="70px">
          <el-form-item label="商品名称" prop="name">
            <el-input v-model="form.product_name" placeholder="请输入商品名称" />
          </el-form-item>
          <el-form-item label="拼团时间">
            <el-date-picker v-model="createTimes" type="datetimerange" range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" />
          </el-form-item>
          <div class="fp-form-footer pull-right">
            <div class="pull-right">
              <el-button type="default" @click="handleBaseSearch('reset')">重置</el-button>
              <el-button type="default" @click="handleBaseSearch('search')">查询</el-button>
            </div>
          </div>
        </el-form>
      </el-main>
      <el-table :data="list" border style="width: 100%">
        <el-table-column prop="collage_order_id" label="拼团订单id" />
        <el-table-column prop="order_start_time" label="发起时间" />
        <el-table-column label="结束时间">
          <template slot-scope="scope">
            <!-- null 表示订单未结束 -->
            {{ scope.row.order_end_time || '-' }}
          </template>
        </el-table-column>
        <el-table-column prop="product_id" label="商品id" />
        <el-table-column prop="order_amount" label="金额" />
        <el-table-column prop="product_type" label="类别">
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? '商品' : '服务' }}
          </template>
        </el-table-column>
        <el-table-column prop="dept_name_list" label="拼团状态">
          <template slot-scope="scope">
            {{ scope.row.pay_success_people }} / {{ scope.row.max_people }}
          </template>
        </el-table-column>
        <el-table-column v-if="!isHidden" label="操作" width="200">
          <template slot-scope="scope">
            <el-button v-if="scope.row.pay_success_people === scope.row.max_people" type="primary" size="small" @click="checkRecord(scope.row)">查看消费记录</el-button>
            <el-button v-if="scope.row.pay_success_people !== scope.row.max_people" type="primary" size="small" @click="together(scope.row)">凑团</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-main>
        <el-pagination background layout="prev, pager, next" :total="total" @current-change="pageChange" />
      </el-main>
    </template>
  </base-content>
</template>

<script>
import { mapGetters } from 'vuex'
import { hasPermission } from '@/utils'
import { getCollageOrderList, finishCollageByGroupId } from '@/api/groupbuy'
export default {
  data() {
    return {
      // here is dialog
      isShow: false,
      list: [],
      form: {
        product_name: '',
        start_time: '',
        end_time: ''
      },
      createTimes: [],
      total: 0,
      pageNum: 1,
      pageSize: 10,
      isHidden: false
    }
  },
  computed: {
    ...mapGetters(['sidebar']),
    routes() {
      return this.$router.options.routes
    }
  },
  async mounted() {
    const isHidden = !hasPermission('拼团管理')
    this.isHidden = isHidden
    this.query({ page_size: 10, page_num: this.pageNum })
  },
  methods: {
    async query(param) {
      const params = {
        start_time: this.createTimes[0],
        end_time: this.createTimes[1],
        page_num: this.pageNum,
        page_size: this.pageSize,
        ...param
      }
      const result = await getCollageOrderList(params)
      if (result.code === '0') {
        this.list = result.info.data
        this.total = result.info.meta.count
      }
    },
    // 编辑
    checkRecord(row) {
      this.$router.push({
        path: '/groupbuy/records',
        query: { id: row.collage_order_id }
      })
    },
    // 凑团
    together(row) {
      const { collage_order_id } = row
      finishCollageByGroupId({ id: collage_order_id }).then((res) => {
        if (res.code === '0') {
          this.query()
          this.$message.success('凑团成功')
        } else {
          this.$message.error(`凑团失败：${res.msg}`)
        }
      })
    },
    // 分页回调
    pageChange(val) {
      this.pageNum = val
      this.query({ page_num: val })
    },
    // val: 当前表单中的数据, key 用来handles 中设置的唯一标识key值
    handleBaseSearch(key) {
      if (key === 'search') {
        this.query({ product_name: this.form.product_name, page_num: 1 })
      } else {
        this.form.product_name = ''
        this.form.start_time = ''
        this.form.end_time = ''
        this.createTimes = []
        this.query({ product_name: '', page_num: 1 })
      }
    }
  }
}
</script>
